জাভাস্ক্রিপ্ট (JavaScript)

ডোম এলিমেন্ট (DOM Element)

Web Development - জাভাস্ক্রিপ্ট (JavaScript) - জাভাস্ক্রিপ্ট এইচটিএমএল ডোম (JS HTML DOM) | NCTB BOOK

এইচটিএমএল এলিমেন্টকে কিভাবে খুজে বের করতে হয় এবং এক্সেস করতে হবে তা এই পেজে শিখতে পারবো।


এইচটিএমএল এলিমেন্টকে খোঁজা

প্রায়ই আপনি জাভাস্ক্রিপ্ট দ্বারা একটি পেজের এইচটিএমএল এলিমেন্টকে নিয়ে কাজ করতে চাইবেন।

সেটা করার জন্য আপনাকে প্রথমে এলিমেন্টটিকে খুঁজে বের করতে হবে। একটি এলিমেন্টকে খুঁজে বের করার কয়েকটি উপায় রয়েছেঃ

  • id দ্বারা এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করা
  • ট্যাগের নাম দ্বারা এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করা
  • class নাম দ্বারা এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করা
  • সিএসএস সিলেক্টর দ্বারা এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করা
  • এইচটিএমএল অবজেক্ট কালেকশন দ্বারা এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করা

Id দ্বারা এইচটিএমএল এলিমেন্টকে খুঁজে বের করা

একটি এলিমেন্টকে ডোম এর ভেতর খুঁজে বের করার সবচেয়ে সহজ উপায় হলো এলিমেন্টের Id ব্যবহার করা।

নিচের উদাহরণে id="intro" যুক্ত এলিমেন্টটিকে খুঁজে বের করা হল:

kt_satt_skill_example_id=1342

যদি এলিমেন্টটি খুঁজে পাওয়া যায় তাহলে মেথডটি এলিমেন্টকে অবজেক্ট হিসেবে রিটার্ন করবে।

যদি এলিমেন্টটি খুঁজে পাওয়া না যায় তাহলে el ভ্যারিয়েবলটি খালি থাকবে।


ট্যাগের নাম দ্বারা এইচটিএমএল এলিমেন্টকে খুঁজে বের করা

নিচের উদাহরণে সকল <p> এলিমেন্টকে খুঁজে বের করা হলোঃ

kt_satt_skill_example_id=1344

নিচের এই উদাহরণটি প্রথমে id="main" যুক্ত এলিমেন্টকে খুঁজে বের করবে এবং তারপর "main" এর মাঝের সকল <p> এলিমেন্টকে খুঁজে বের করবেঃ

kt_satt_skill_example_id=1345

Class নামের দ্বারা এইচটিএমএল এলিমেন্টকে খুঁজে বের করা

আপনি যদি একই নামের Class যুক্ত এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করতে চান তাহলে getElementsByClassName() ব্যবহার করুন।
 

নিচের এই উদাহরনটিতে class="para" যুক্ত সকল এলিমেন্টকে রিটার্ন করে।

kt_satt_skill_example_id=1348

Class এর নাম দ্বারা এলিমেন্টকে খুঁজে বের করা, IE8 এবং এর আগের ভার্সনগুলোতে সাপোর্ট করে না।


CSS সিলেক্টর দ্বারা এইচটিএমএল এলিমেন্টকে খুঁজে বের করা

আপনি যদি নির্দিষ্ট সিএসএস সিলেক্টরযুক্ত(যেমনঃ id, class , type, এট্রিবিউট, এট্রিবিউটের ভ্যালু ইত্যাদি) সকল এইচটিএমএল এলিমেন্টকে খুঁজতে চান তবে querySelectorAll() মেথডটি ব্যবহার করুন।
 

নিচের এই উদাহরনটিতে class="para" যুক্ত সকল <p> এলিমেন্টকে রিটার্ন করে।

kt_satt_skill_example_id=1349

querySelectorAll() মেথড দ্বারা এলিমেন্টকে খুঁজে বের করা, IE8 এবং এর আগের ভার্সনগুলোতে সাপোর্ট করে না।


এইচটিএমএল অবজেক্ট কালেকশন দ্বারা এইচটিএমএল এলিমেন্টকে খুঁজে বের করা

নিচের এই উদাহরণটিতে ফর্ম কালেকশনের মধ্য থেকে id="myForm" যুক্ত ফর্ম এলিমেন্টকে খুঁজে বের করে এবং সকল এলিমেন্টের ভ্যালু প্রদর্শন করে:

kt_satt_skill_example_id=1350

নিচের এই এইচটিএমএল অবজেক্টকেও এক্সেস করা যায়ঃ

kt_satt_skill_example_id=1352

  • document.body

kt_satt_skill_example_id=1354

  • document.documentElement

kt_satt_skill_example_id=1355

  • document.embeds

kt_satt_skill_example_id=1356

  • document.forms

kt_satt_skill_example_id=1359

  • document.head

kt_satt_skill_example_id=1361

  • document.images

kt_satt_skill_example_id=1365

  • document.links

kt_satt_skill_example_id=1366

  • document.scripts

kt_satt_skill_example_id=1367

  • document.title

kt_satt_skill_example_id=1368

Content added || updated By
Promotion